<script lang="ts" setup>
import { useUserStore } from '@/stores'
import type { DropdownProps } from 'tdesign-vue-next'

/*
 * default
 * 组件用途：
 * 创建日期： 2024/04/07
 * 作者： 谭期元
 */

const userStore = useUserStore()

const options = [
  // { content: '个人设置', value: 1 },
  { content: '退出系统', value: 2 }
]

const handleClick: DropdownProps['onClick'] = (data) => {
  switch (data.value) {
    case 1:
      break
    case 2:
      userStore.logout()
      break
  }
}
</script>

<template>
  <t-layout class="h-100">
    <t-aside>
      <t-menu :value="$route.path" height="550px" style="margin-right: 50px" theme="light">
        <template #logo>
          <img
            alt="logo"
            class="position-relative"
            src="@/assets/logo.png"
            style="left: -20px"
            width="220"
          />
        </template>
        <t-menu-item :to="{ path: '/' }" value="/">
          <template #icon>
            <t-icon name="home" />
          </template>
          首页
        </t-menu-item>
        <t-menu-item :to="{ path: '/user', query: { current: '1', limit: '20' } }" value="/user">
          <template #icon>
            <t-icon name="user-list" />
          </template>
          用户管理
        </t-menu-item>
        <t-menu-item href="http://s1.tqy.pub:9000" target="_blank" value="/minio">
          <template #icon>
            <t-icon name="system-setting" />
          </template>
          MinIO管理
        </t-menu-item>
      </t-menu>
    </t-aside>
    <t-layout>
      <t-header>
        <t-head-menu height="120px" theme="light" value="item1">
          <template #operations>
            <t-dropdown :options="options" trigger="click" @click="handleClick">
              <t-space>
                <t-button variant="text">
                  {{ userStore.user.email }}
                  <template #suffix>
                    <t-icon name="chevron-down" size="16" />
                  </template>
                </t-button>
              </t-space>
            </t-dropdown>
          </template>
        </t-head-menu>
      </t-header>
      <t-content>
        <RouterView />
      </t-content>
    </t-layout>
  </t-layout>
</template>

<style lang="scss" scoped></style>
